<template>
  <section class="content">
    <details-head v-model="status"
                  :title="`线路拆单`"
                  :custom-list="buttonList"
                  :multiple="true"
                  close-label="返回"
                  :loading="loading"
                  @change="lineSplitBefore" />
    <div class="body">
      <div class="titleSty">线路拆分过程</div>
      <split-process ref="process"
                     :carrier-options="carrierOptions"
                     :initial-time="initialTime"
                     :customer-id="customerId"
                     @changeProcessList="changeProcessList" />
      <div class="mt45">
        <div class="titleSty">拆分后安排调度</div>
        <split-scheduling :process-list="processList" />
      </div>
      <div class="mt45">
        <div class="titleSty">显示调度详情</div>
        <dispatch-details type="0"
                          :process-list="processList"
                          :records-list="recordsList" />
      </div>
    </div>
  </section>
</template>

<script>
import DetailsHead from "@components/detailsHead/Header.vue";
import SplitProcess from "./components/SplitProcess.vue";
import SplitScheduling from "./components/SplitScheduling.vue";
import DispatchDetails from "./components/DispatchDetails.vue";
import customerApi from "@/api/modules/customer";
import { transport, splitting } from "@/api/index";

export default {
  name: "LineSplitting",
  components: {
    DetailsHead,
    SplitProcess,
    SplitScheduling,
    DispatchDetails
  },
  data () {
    return {
      loading: false,
      customerId: null,
      buttonList: [{ label: "确定拆单", status: "1" }],
      status: "1",
      carrierOptions: [],
      schedulingVisible: false,
      detailsVisible: false,
      processList: [],
      recordsList: [],
      initialTime: {
        fromTime: null,
        toTime: null,
        selectableRange: `00:00:00 - 23:59:59`
      },
      billDayStatus: null, //关账状态 0未关账 1已关账
    };
  },
  computed: {
    waybillId () {
      return this.$route.query?.waybillId || this.$route.query?.id;
    }
  },
  created () {
    let params = {
      page: 1,
      size: 999999,
      sort: [{ name: "createAt", asc: false }],
      statuses: [1, 3],
      type: [1, 0],
      extraType: 0
    };
    this.getTransportDetail();
    this.getCarrierData(params);
  },
  methods: {
    async getTransportDetail () {
      let { data } = await transport.getDetail(this.waybillId);
      this.customerId = data?.customer?.customerId
      this.billDayStatus = data.billDayStatus;
      this.initialTime = {
        fromTime: this.$moment(data.fromTime).format(`YYYY-MM-DD HH:mm`),
        toTime: this.$moment(data.toTime).format(`YYYY-MM-DD HH:mm`),
        selectableRange: `${data.fromTime.substring(
          10,
          16
        )}:00 - ${data.toTime.substring(10, 16)}:00`
      };
      this.recordsList.push({
        no: data.contractNo,
        from: {
          cstName: data.customer.customerName,
          address: `${data.fromAddress.province}${data.fromAddress.city}${data.fromAddress.district}${data.fromAddress.address}`,
          customer: data.fromContact.contactName,
          tel: data.fromContact.contactMobile,
          time: data.fromTime
        },
        to: {
          cstName: data.consignee.consigneeName,
          address: `${data.toAddress.province}${data.toAddress.city}${data.toAddress.district}${data.toAddress.address}`,
          customer: data.toContact.contactName,
          tel: data.toContact.contactMobile,
          time: data.toTime
        }
      });
    },
    // 承运商下拉
    async getCarrierData (params) {
      let { code, data } = await customerApi.carrierName(params);
      if (code !== 0 || !data) return;
      this.carrierOptions = data.records;
    },
    // 途经站List
    changeProcessList () {
      this.processList = this.$refs.process.listData;
    },
    lineSplitBefore () {
      if (this.billDayStatus) {
        this.$confirm(`拆单后部分运单将自动调度，由于运单已过关账期双方不能再报价，是否确定继续操作?`,
          "提示",
          {
            confirmButtonText: "拆单",
            type: "warning",
            closeOnClickModal: false
          }).then(() => {
            this.loading = true;
            this.lineSplit();
          });
      } else {
        this.loading = true;
        this.lineSplit();
      }
    },
    // 拆单
    async lineSplit () {
      if (this.processList.length < 1) {
        this.loading = false;
        return this.$message.error("请添加途径地址，最少需拆分2段！");
      }
      console.log("===========>this.processList", this.processList)
      try {
        let { code } = await splitting.split({
          waybillId: this.waybillId,
          waybillDivideMode: 1,
          spec: {
            lineList: this.processList
          }
        }).catch(() => {
          this.loading = false;
        });
        if (code === 0) {
          this.$message.success("拆单成功！");
          this.loading = false;
          if (this.$route.query.detailFlag) {
            this.$router.go(-2);
          } else {
            this.$router.back();
          }
        }
      } catch (err) {
        console.log(err)
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.content {
  background: var(--prev-bg-white);
  padding: 20px;
  position: relative;
  height: 88vh;
}
.body {
  height: 80vh;
  overflow-x: hidden;
  margin-top: 20px;
}
.mt45 {
  margin-top: 45px;
}
.titleSty {
  width: 200px;
  height: 16px;
  border-left: 2px solid var(--prev-color-primary);
  padding-left: 6px;
  margin-bottom: 30px;
  font-size: 16px;
  font-weight: 500;
}
</style>
